<template>
  <!-- Header 组件 -->
  <Header></Header>
  <!-- 内容 -->
  <div class="bg-gray border-b-gray">
    <el-row class="border-b-gray">
      <el-col :span="6">
        <Navigation :category="data.category"></Navigation>   <!-- 导航组件 -->
      </el-col>
      <el-col :span="18">
        <Carousel :imgs="data.imgs"></Carousel>                <!-- 轮播图组件 -->
      </el-col>
    </el-row> 
    <!-- 内容组件 --> 
    <Content :channelImgs="data.channelImgs" :recommendGoods="data.recommendGoods"></Content>  
  </div>
  <Footer></Footer>   <!--尾部组件-->
</template>

<script setup>
import Header from "@/components/Header.vue"   //@是./src目录的别名，在vite.config.js配置
import Navigation from "@/components/Navigation.vue"
import Carousel from "@/components/Carousel.vue"
import Content from "@/components/Content.vue"
import Footer from "@/components/Footer.vue"
import { reactive,onMounted,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
const data = reactive({
  imgs:[],
  category:[],
  channelImgs:[],
  recommendGoods:[]
})

let getCarouselImgs = ()=>{     //轮播图数据
  proxy.$http({                 //通过代理对象取得在main.js挂载全局对象axios
    method:"get",               //设置网络请求方式为get，默认方式，可以省略
    url:"./data/carousel.json"
  }).then(res=>{
    data.imgs = res.data
  })
}
let getCategory = ()=>{        //分类导航数据
  proxy.$http({                
    method:"get",               
    url:"./data/category.json"
  }).then(res=>{
    data.category = res.data
  })
}
let getChannelImgs = ()=>{        //频道数据
  proxy.$http({                
    method:"get",               
    url:"./data/channel.json"
  }).then(res=>{
    data.channelImgs = res.data
  })
}
let getRecommendGoods = ()=>{        //推荐商品数据
  proxy.$http({                
    method:"get",               
    url:"./data/goods-copy.json"
  }).then(res=>{
    data.recommendGoods = res.data
  })
}
onMounted(()=>{
  getCarouselImgs()     //获取轮播图数据
  getCategory()         //获取商品分类数据
  getChannelImgs()      //获取频道数据
  getRecommendGoods()   //获取推荐商品数据
})
</script>

<style scoped>
header{
  border-bottom: 1px solid #ddd;
}
</style>